<template>
  <div>
    <input type="text" v-model="age">
    <input type="text" v-model="name">
    {{ obj }}
    <button @click="fn">清空</button>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
// @ is an alias to /src
/* 
  v-for v-if同时使用 v-for的优先级较高
  v-for和 v-if不建议同时使用  有性能上的浪费
*/
export default {
  data() {
    return {
      age: 100,
      name: "珠峰",
      ary: [111, 222, 333, 25, 67, 46, 89],
      obj: { a: 123 }
    }
  },
  methods: {
    fn() {
      console.log(this)
      // this.name = 999
      // this.ary.push(999)
      this.obj.a = 99
      // this.obj = { a: 999 }
    }
  },
  watch: {
    // 侦听器 侦听的都是this上存在的属性
    // name(newValue, oldValue) {
    //   console.log("只要当name改变了，就会触发这个回调函数", newValue, oldValue)
    // },
    // obj(newValue, oldValue) {
    //   console.log("只要当obj改变了，就会触发这个回调函数", newValue, oldValue)
    // }
    // watch obj 相当 创建了一个watcher 被这个watcher放到 obj的事件池中
    obj: {
      deep: true,// 深度监听  新老值是一样的
      immediate: true,//初始化的时候 执行一次handler
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, '--------------  ')
      }
    }
  },
  computed: {
    // 计算属性中的属性 也会被挂载到当前实例上
    // list() {
    //   // this.ary 和 this.age 称为list的依赖
    //   // 当前函数中"同步"使用的属性 都属于list的依赖
    //   // 只要依赖不发生改变  那么 list对应的这个函数就不会执行 ---> 这就是所谓计算属性有缓存
    // 缓存 靠的是 当前这个watcher的dirty属性 属性是true就会重新执行get获取新值，false就不会执行get
    //   console.log(66666)
    //   setTimeout(() => {
    //     console.log(this.name)
    //   }, 10);
    //   return this.ary.filter(item => item < this.age)
    // }
    list: {
      // 计算属性本质就是Watcher实例； list的值 本质是 当前watcher的value属性值；
      get() {
        return this.ary.filter(item => item < this.age)
      },
      set(val) {
        // 当外界给 list赋予值的时候 就会触发set,val对应的就是被赋予的那个值
        console.log(val)
        this.ary = val

      }
    }
  }
}
</script>
<style lang="less">
</style>